<template>
  <div class="study-log-container" :class="theme">
    <header class="header">
      <h1>用户学习日志</h1>
      <div class="header-actions">
        <button class="filter-btn" @click="toggleFilter">
          <i class="icon-filter"></i>
          {{ showFilters ? '隐藏筛选' : '筛选日志' }}
        </button>
        <button class="export-btn" @click="exportLogs">
          <i class="icon-download"></i>
          导出数据
        </button>
        <button class="theme-toggle" @click="toggleTheme">
          <i :class="theme === 'light' ? 'icon-sun' : 'icon-moon'"></i>
          {{ theme === 'light' ? '深色模式' : '浅色模式' }}
        </button>
      </div>
    </header>

    <div class="filter-section" v-if="showFilters">
      <div class="filter-group">
        <label for="user-id">用户ID:</label>
        <input type="number" id="user-id" v-model="filters.userId" placeholder="输入用户ID">
      </div>

      <div class="filter-group">
        <label for="session-type">学习类型:</label>
        <select id="session-type" v-model="filters.sessionType">
          <option value="">全部</option>
          <option value="study">学习</option>
          <option value="review">复习</option>
        </select>
      </div>

      <div class="filter-group">
        <label for="start-date">开始日期:</label>
        <input type="date" id="start-date" v-model="filters.startDate">
      </div>

      <div class="filter-group">
        <label for="end-date">结束日期:</label>
        <input type="date" id="end-date" v-model="filters.endDate">
      </div>

      <div class="filter-group">
        <label for="min-duration">最小时长(分钟):</label>
        <input type="number" id="min-duration" v-model="filters.minDuration" min="0">
      </div>

      <button class="apply-btn" @click="applyFilters">应用筛选</button>
      <button class="reset-btn" @click="resetFilters">重置</button>
    </div>

    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-value">{{ totalSessions }}</div>
        <div class="stat-label">总学习次数</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ totalStudyTime }}<span class="stat-unit">小时</span></div>
        <div class="stat-label">总学习时长</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ averageDailyTime }}<span class="stat-unit">分钟</span></div>
        <div class="stat-label">日均学习</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ totalWords }}</div>
        <div class="stat-label">学习单词数</div>
      </div>
    </div>

    <!-- <div class="chart-container">
      <div class="chart-card">
        <h3>学习时长趋势</h3>
        <div class="chart-placeholder">
          
          <div class="mock-chart">
            <div v-for="(day, index) in last7Days" :key="index" class="chart-bar-container">
              <div class="chart-bar" :style="{ height: `${day.duration / maxDuration * 100}%` }"></div>
              <div class="chart-label">{{ day.date }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-card">
        <h3>学习类型分布</h3>
        <div class="chart-placeholder">
          
          <div class="mock-pie-chart">
            <div class="pie-slice study" :style="{ '--percentage': studyPercentage }"></div>
            <div class="pie-slice review" :style="{ '--percentage': reviewPercentage }"></div>
            <div class="pie-center"></div>
            <div class="pie-legend">
              <div><span class="legend-color study"></span> 学习 {{ studyPercentage }}%</div>
              <div><span class="legend-color review"></span> 复习 {{ reviewPercentage }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <div class="log-list">
      <div class="log-list-header">
        <div class="header-item" @click="sortBy('study_date')">
          学习日期
          <i
            :class="sortColumn === 'study_date' ? (sortDirection === 'asc' ? 'icon-arrow-up' : 'icon-arrow-down') : ''"></i>
        </div>
        <div class="header-item" @click="sortBy('user_id')">
          用户ID
          <i
            :class="sortColumn === 'user_id' ? (sortDirection === 'asc' ? 'icon-arrow-up' : 'icon-arrow-down') : ''"></i>
        </div>
        <div class="header-item" @click="sortBy('start_time')">
          学习时段
          <i
            :class="sortColumn === 'start_time' ? (sortDirection === 'asc' ? 'icon-arrow-up' : 'icon-arrow-down') : ''"></i>
        </div>
        <div class="header-item" @click="sortBy('duration_minutes')">
          学习时长
          <i
            :class="sortColumn === 'duration_minutes' ? (sortDirection === 'asc' ? 'icon-arrow-up' : 'icon-arrow-down') : ''"></i>
        </div>
        <div class="header-item" @click="sortBy('word_count')">
          单词数
          <i
            :class="sortColumn === 'word_count' ? (sortDirection === 'asc' ? 'icon-arrow-up' : 'icon-arrow-down') : ''"></i>
        </div>
        <div class="header-item" @click="sortBy('session_type')">
          学习类型
          <i
            :class="sortColumn === 'session_type' ? (sortDirection === 'asc' ? 'icon-arrow-up' : 'icon-arrow-down') : ''"></i>
        </div>
      </div>

      <div class="log-items">
        <div v-for="log in filteredLogs" :key="log.log_id" class="log-item" :class="log.session_type">
          <div class="log-date">{{ formatDate(log.study_date) }}</div>
          <div class="user-id">{{ log.user_id }}</div>
          <div class="time-range">
            <span v-if="log.start_time">{{ formatTime(log.start_time) }}</span>
            <span v-else>--:--</span>
            <span>至</span>
            <span v-if="log.end_time">{{ formatTime(log.end_time) }}</span>
            <span v-else>--:--</span>
          </div>
          <div class="duration">
            <span class="duration-value">{{ log.duration_minutes }}</span>
            <span class="duration-unit">分钟</span>
          </div>
          <div class="word-count">{{ log.word_count }}</div>
          <div class="session-type">
            <span class="type-badge" :class="log.session_type">
              {{ log.session_type === 'study' ? '学习' : '复习' }}
            </span>
          </div>
          <div class="log-details" @click="toggleDetails(log.log_id)">
            <i :class="expandedLogs[log.log_id] ? 'icon-chevron-up' : 'icon-chevron-down'"></i>
            <div class="details-content" v-if="expandedLogs[log.log_id]">
              <div><strong>日志ID:</strong> {{ log.log_id }}</div>
              <div><strong>学习效率:</strong> {{ calculateEfficiency(log) }} 词/分钟</div>
            </div>
          </div>
        </div>
      </div>

      <div class="pagination" v-if="totalPages > 1">
        <button @click="prevPage" :disabled="currentPage === 1" class="page-btn">
          上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="page-btn">
          下一页
        </button>
        <select v-model="itemsPerPage" @change="changeItemsPerPage" class="page-size-select">
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
          <option value="50">50条/页</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getAllStudyLogs } from '../../api/authService.js';

// 主题功能
const theme = inject("theme", ref('light'));
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};

// 模拟学习日志数据
const logs = ref([
  {
    log_id: 1,
    user_id: 101,
    study_date: '2023-05-15',
    start_time: '2023-05-15T09:00:00',
    end_time: '2023-05-15T09:45:00',
    duration_minutes: 45,
    word_count: 30,
    session_type: 'study'
  }
]);

// 筛选状态
const showFilters = ref(false);
const filters = ref({
  userId: '',
  sessionType: '',
  startDate: '',
  endDate: '',
  minDuration: ''
});

// 排序状态
const sortColumn = ref('study_date');
const sortDirection = ref('desc');

// 分页状态
const itemsPerPage = ref(10);
const currentPage = ref(1);

// 展开的日志详情
const expandedLogs = ref({});

// 切换筛选面板
const toggleFilter = () => {
  showFilters.value = !showFilters.value;
};

// 导出日志
// 导出学习日志
const exportLogs = () => {
  const data = logs.value;

  if (!data || data.length === 0) {
    alert('暂无学习日志可导出');
    return;
  }

  // CSV 表头
  const headers = [
    '日志ID', '用户ID', '学习日期', '开始时间', '结束时间',
    '学习时长（分钟）', '单词数量', '学习类型'
  ];

  // 拼接 CSV 内容
  const rows = data.map(log => [
    log.log_id,
    log.user_id,
    log.study_date,
    log.start_time || '',
    log.end_time || '',
    log.duration_minutes,
    log.word_count,
    log.session_type
  ]);

  // 合并表头和内容
  const csvContent = [headers, ...rows].map(row =>
    row.map(item => `"${String(item).replace(/"/g, '""')}"`).join(',')
  ).join('\n');

  // 创建 Blob 对象
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

  // 生成文件名
  const now = new Date();
  const filename = `study_logs_${now.toISOString().slice(0, 10)}.csv`;

  // 生成下载链接
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};



// 应用筛选
const applyFilters = () => {
  currentPage.value = 1;
};

// 重置筛选
const resetFilters = () => {
  filters.value = {
    userId: '',
    sessionType: '',
    startDate: '',
    endDate: '',
    minDuration: ''
  };
  applyFilters();
};

// 排序
const sortBy = (column) => {
  if (sortColumn.value === column) {
    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
  } else {
    sortColumn.value = column;
    sortDirection.value = 'asc';
  }
};

// 切换日志详情
const toggleDetails = (logId) => {
  expandedLogs.value[logId] = !expandedLogs.value[logId];
};

// 分页控制
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const changeItemsPerPage = () => {
  currentPage.value = 1;
};

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

// 格式化时间
const formatTime = (datetime) => {
  return new Date(datetime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};

// 计算学习效率
const calculateEfficiency = (log) => {
  if (log.duration_minutes <= 0) return 0;
  return (log.word_count / log.duration_minutes).toFixed(1);
};

// 计算属性
const filteredLogs = computed(() => {
  let result = [...logs.value];

  // 应用筛选
  if (filters.value.userId) {
    result = result.filter(log => log.user_id.toString() === filters.value.userId.toString());
  }

  if (filters.value.sessionType) {
    result = result.filter(log => log.session_type === filters.value.sessionType);
  }

  if (filters.value.minDuration) {
    result = result.filter(log => log.duration_minutes >= parseInt(filters.value.minDuration));
  }

  // 应用日期筛选
  if (filters.value.startDate) {
    const startDate = new Date(filters.value.startDate);
    result = result.filter(log => new Date(log.study_date) >= startDate);
  }

  if (filters.value.endDate) {
    const endDate = new Date(filters.value.endDate);
    endDate.setHours(23, 59, 59, 999);
    result = result.filter(log => new Date(log.study_date) <= endDate);
  }

  // 应用排序
  result.sort((a, b) => {
    const aValue = a[sortColumn.value];
    const bValue = b[sortColumn.value];

    if (aValue === null || aValue === undefined) return 1;
    if (bValue === null || bValue === undefined) return -1;

    if (aValue < bValue) return sortDirection.value === 'asc' ? -1 : 1;
    if (aValue > bValue) return sortDirection.value === 'asc' ? 1 : -1;
    return 0;
  });

  // 应用分页
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  return result.slice(startIndex, startIndex + itemsPerPage.value);
});

// 统计数据
const totalSessions = computed(() => logs.value.length);
const totalStudyTime = computed(() => {
  const totalMinutes = logs.value.reduce((sum, log) => sum + log.duration_minutes, 0);
  return (totalMinutes / 60).toFixed(1);
});
const averageDailyTime = computed(() => {
  if (logs.value.length === 0) return 0;
  const days = new Set(logs.value.map(log => log.study_date)).size;
  const totalMinutes = logs.value.reduce((sum, log) => sum + log.duration_minutes, 0);
  return Math.round(totalMinutes / days);
});
const totalWords = computed(() => logs.value.reduce((sum, log) => sum + log.word_count, 0));

// 图表数据
const last7Days = computed(() => {
  // 简化处理，实际应该根据真实数据计算
  return [
    { date: '5/12', duration: 45 },
    { date: '5/13', duration: 60 },
    { date: '5/14', duration: 30 },
    { date: '5/15', duration: 90 },
    { date: '5/16', duration: 75 },
    { date: '5/17', duration: 120 },
    { date: '5/18', duration: 60 }
  ];
});

const maxDuration = computed(() => {
  return Math.max(...last7Days.value.map(day => day.duration), 1);
});

const studyPercentage = computed(() => {
  const studyCount = logs.value.filter(log => log.session_type === 'study').length;
  return Math.round((studyCount / logs.value.length) * 100) || 0;
});

const reviewPercentage = computed(() => {
  return 100 - studyPercentage.value;
});

const totalPages = computed(() => {
  let filteredCount = logs.value.length;
  // 这里应该有完整的筛选逻辑来计算总数，简化处理
  return Math.ceil(filteredCount / itemsPerPage.value);
});
const loadAllStudyLogData = async () => {
  try {
    const res = await getAllStudyLogs();

    if (res) {
      console.log(res.logs, "log列表");
      logs.value = res.logs;
    } else {
      ElMessage.error(res.message || "获取log列表失败");
    }
  } catch (error) {
    ElMessage.error("获取失败: ");
  } finally {
    // loading.value = false;
  }
};
onMounted(() => {
  loadAllStudyLogData();
})
</script>

<style scoped>
.study-log-container {
  --bg-color: #f8f9fa;
  --text-color: #333;
  --primary-color: #4361ee;
  --secondary-color: #6c757d;
  --border-color: #e1e4e8;
  --card-bg: #fff;
  --hover-bg: #f1f3f5;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --study-color: #4cc9f0;
  --review-color: #f72585;
  --success-color: #4caf50;

  background-color: var(--card-bg);
  color: var(--text-color);
  min-height: 100%;
  /* padding: 20px; */
  transition: all 0.3s ease;
}

.study-log-container.dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --primary-color: #4895ef;
  --secondary-color: #8e8e8e;
  --border-color: #333;
  --card-bg: #2d2d2d;
  --hover-bg: #383838;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: var(--primary-color);
}

.header-actions {
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s;
}

.filter-btn {
  background-color: var(--primary-color);
  color: white;
}

.filter-btn:hover {
  background-color: color-mix(in srgb, var(--primary-color), black 10%);
}

.export-btn {
  background-color: var(--success-color);
  color: white;
}

.export-btn:hover {
  background-color: color-mix(in srgb, var(--success-color), black 10%);
}

.theme-toggle {
  background-color: var(--secondary-color);
  color: white;
}

.theme-toggle:hover {
  background-color: color-mix(in srgb, var(--secondary-color), black 10%);
}

.filter-section {
  background-color: var(--card-bg);
  padding: 15px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-size: 14px;
  color: var(--secondary-color);
}

.filter-group input,
.filter-group select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--card-bg);
  color: var(--text-color);
}

.apply-btn {
  background-color: var(--primary-color);
  color: white;
}

.reset-btn {
  background-color: var(--secondary-color);
  color: white;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.stat-unit {
  font-size: 16px;
  font-weight: normal;
}

.stat-label {
  font-size: 14px;
  color: var(--secondary-color);
  margin-top: 5px;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.chart-card h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.chart-placeholder {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-chart {
  display: flex;
  height: 200px;
  width: 100%;
  align-items: flex-end;
  gap: 15px;
  padding: 0 20px;
}

.chart-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar {
  width: 30px;
  background-color: var(--primary-color);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
}

.chart-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--secondary-color);
}

.mock-pie-chart {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.pie-slice {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0, 0 0);
}

.pie-slice.study {
  background: conic-gradient(var(--study-color) 0% var(--percentage), transparent var(--percentage) 100%);
}

.pie-slice.review {
  background: conic-gradient(var(--review-color) 0% var(--percentage), transparent var(--percentage) 100%);
  transform: rotate(calc(var(--percentage) * 3.6deg));
}

.pie-center {
  position: absolute;
  width: 60%;
  height: 60%;
  background-color: var(--card-bg);
  border-radius: 50%;
  top: 20%;
  left: 20%;
}

.pie-legend {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 6px;
}

.legend-color.study {
  background-color: var(--study-color);
}

.legend-color.review {
  background-color: var(--review-color);
}

.log-list {
  background-color: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.log-list-header {
  display: grid;
  grid-template-columns: 120px 80px 160px 100px 80px 100px 40px;
  padding: 12px 15px;
  background-color: var(--hover-bg);
  font-weight: bold;
  border-bottom: 1px solid var(--border-color);
}

.header-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

.header-item:hover {
  color: var(--primary-color);
}

.log-items {
  max-height: 600px;
  overflow-y: auto;
}

.log-item {
  display: grid;
  grid-template-columns: 120px 80px 160px 100px 80px 100px 40px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
  position: relative;
}

.log-item:last-child {
  border-bottom: none;
}

.log-item:hover {
  background-color: var(--hover-bg);
}

.log-item.study {
  border-left: 3px solid var(--study-color);
}

.log-item.review {
  border-left: 3px solid var(--review-color);
}

.log-date,
.user-id,
.time-range,
.duration,
.word-count,
.session-type {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.time-range {
  display: flex;
  gap: 5px;
}

.duration-value {
  font-weight: bold;
  color: var(--primary-color);
}

.duration-unit {
  font-size: 12px;
  color: var(--secondary-color);
  margin-left: 2px;
}

.type-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.study {
  background-color: color-mix(in srgb, var(--study-color), transparent 80%);
  color: var(--study-color);
}

.type-badge.review {
  background-color: color-mix(in srgb, var(--review-color), transparent 80%);
  color: var(--review-color);
}

.log-details {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary-color);
}

.details-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: var(--card-bg);
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  line-height: 1.6;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  gap: 15px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.page-btn {
  padding: 6px 12px;
  background-color: var(--primary-color);
  color: white;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: var(--secondary-color);
}

.page-size-select {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-color);
}

/* 图标样式 - 可以使用实际的图标库替换 */
.icon-filter::before {
  content: "🔍";
}

.icon-download::before {
  content: "⏬";
}

.icon-sun::before {
  content: "☀️";
}

.icon-moon::before {
  content: "🌙";
}

.icon-arrow-up::before {
  content: "↑";
}

.icon-arrow-down::before {
  content: "↓";
}

.icon-chevron-down::before {
  content: "▼";
  font-size: 10px;
}

.icon-chevron-up::before {
  content: "▲";
  font-size: 10px;
}

@media (max-width: 1200px) {

  .log-list-header,
  .log-item {
    grid-template-columns: 100px 70px 140px 90px 70px 90px 30px;
    font-size: 13px;
  }
}

@media (max-width: 992px) {
  .chart-container {
    grid-template-columns: 1fr;
  }

  .log-list-header,
  .log-item {
    grid-template-columns: 90px 60px 120px 80px 60px 80px 30px;
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .filter-section {
    grid-template-columns: 1fr 1fr;
  }

  .log-list-header,
  .log-item {
    grid-template-columns: 80px 60px 1fr;
  }

  .log-list-header div:nth-child(4),
  .log-list-header div:nth-child(5),
  .log-list-header div:nth-child(6),
  .log-item div:nth-child(4),
  .log-item div:nth-child(5),
  .log-item div:nth-child(6) {
    display: none;
  }

  .details-content {
    position: static;
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}

@media (max-width: 576px) {
  .filter-section {
    grid-template-columns: 1fr;
  }

  .stats-section {
    grid-template-columns: 1fr 1fr;
  }

  .pagination {
    flex-direction: column;
    gap: 10px;
  }
}
</style>